<template>
  <scroll-view croll-y="true" scroll-y="true" class="scroll-Y">
    <div
      @tap="$emit('do', item)"
      v-for="item in c2List"
      :key="item.id"
      :class="['item', { bg: c2Id == item.id }]"
    >
      <view class="text">
        <view
          :class="[
            'v-pad',
            { front: c2Id == item.id },
            { exist: item.exist && c2Id == item.id },
            { notexist: !item.exist && c2Id == item.id }
          ]"
        ></view>
        <up-text
          :text="item.name"
          :lines="2"
          color="#ed680e"
          size="24rpx"
          v-if="item.exist"
        ></up-text>
        <up-text
          :text="item.name"
          :lines="2"
          color="gray"
          size="24rpx"
          v-else
        ></up-text>
        <view class="v-pad back"></view>
      </view>
    </div>
  </scroll-view>
</template>

<script setup lang="ts">
import { defineProps } from 'vue'
defineProps(['c2List', 'c2Id','deviceModel'])
</script>

<style lang="scss" scoped>
$theSizeOfFont: 26rpx;
.scroll-Y {
  height: 100%;
  width: 100%;
  background-color: $mini-gray;
  overflow: hidden;
  .item {
    font-size: $theSizeOfFont;
    color: gray;
    text-align: left;
    // width: 170rpx;
    height: 80rpx;
    display: flex;
    align-items: center;
    &.bg {
      background-color: #fff;
    }
    .text {
      display: flex;
      flex-direction: row;
      width: 100%;
      .v-pad {
        display: inline-block;
        width: 10rpx;
        
        &.front {
          margin: 0 6rpx;
        }
        &.exist {
          background: #ed680e;
        }
        &.notexist {
          background: grey;
        }

        &.back {
        }
      }
    }
  }
  .active {
    background-color: white;
    color: black;
    font-weight: 600;
  }
}
</style>
